<template>
     <el-tabs v-model="activeName">
        <el-tab-pane v-bind:label="tabTitle" name="first">
            <el-input placeholder="请输入内容"></el-input>
            <mavon-editor v-model="editorValue" v-bind:toolbars="toolbars" v-bind:defaultOpen="defaultOpen" v-bind:subfield="false" v-bind:fontSize="fontSize" style="height: 100%"/>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import eventVue from '../../assets/eventVue'
export default {
  data () {
    return {
      activeName: 'first',
      tabTitle: '新代码片段',
      editorValue: '',
      fontSize: '12px',
      defaultOpen: 'edit', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        underline: true, // 下划线
        mark: true, // 标记
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        trash: true, // 清空
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true // 预览
      }
    }
  },
  mounted () {
    eventVue.$on('listenToCodeId', (message) => {
      this.baddingCodeContent(message)
    })
  },
  methods: {
    baddingCodeContent (data) {
      this.tabTitle = data.value
      var params = new URLSearchParams()
      params.append('codeid', data.key)

      this.$http.post(this.GLOBAL.serverSrc + this.GLOBAL.codeforid, params).then(
        response => {
          this.editorValue = response.data.ccontent
          this.defaultOpen = 'preview'
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
<style>
 .el-input{
   padding-bottom: 10px;
   }
</style>
